<%--
  Created by IntelliJ IDEA.
  Time: 20:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>layui.dtree帮助手册</title>
    <link rel="stylesheet" href="<%=path%>/admin/static/layui/css/layui.css">
    <script type="text/javascript" src="<%=path%>/admin/static/layui/layui.js"></script>
    <script type="text/javascript" src="<%=path%>/admin/static/js/jquery.js"></script>

    <link rel="stylesheet" href="<%=path%>/admin/static/dtree/dtree.css">
    <link rel="stylesheet" href="<%=path%>/admin/static/dtree/font/dtreefont.css">
</head>

<body>
<div class="container">
    <div class="layui-col-xs12">
        <div style="height: 400px;overflow: auto;">
            <ul id="permissionTree" class="dtree" data-id="0"></ul>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    var _dtree =
        layui.extend({
            dtree: '<%=path%>/admin/static/dtree/dtree'
        }).use(['element', 'layer', 'table', 'code', 'util', 'dtree', 'form'], function () {
            var element = layui.element, layer = layui.layer, table = layui.table, util = layui.util,
                dtree = layui.dtree,
                form = layui.form, $ = layui.$;

            _dtree = dtree;
            var DTree = dtree.render({
                elem: "#permissionTree",
                url: "/per/findPermissionsByRoleId?roleId=" +${roleId},
                dataStyle: "layuiStyle",  //使用layui风格的数据格式
                dataFormat: "list",  //配置data的风格为list
                response: {message: "msg", statusCode: 200},  //修改response中返回数据的定义
                type: "all",
                dot: false,  // 隐藏小圆点
                // initLevel: 1,//不展开全部,默认展开
                skin: "layui",  // layui主题风格
                checkbar: true,
                checkbarData: "change",// 记录选中（默认）， "change"：记录变更， "all"：记录全部， "halfChoose"："记录选中和半选（V2.5.0新增）"
            });
            $('#cancel').click(function () {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            })

            dtree.on("node(permissionTree)", function (obj) {
                console.log(obj.param); // 点击当前节点传递的参数
                console.log(obj.childParams); // 当前节点的所有子节点参数
            })

            $('#getNodes').click(function () {
                var params = dtree.getCheckbarNodesParam("permissionTree");
                layer.msg(JSON.stringify(params));
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });


        });

    function get() {
        var params = _dtree.getCheckbarNodesParam("permissionTree");
        var newPer = [];
        var pers = [];
        for (var i = 0; i < params.length; i++) {
            newPer.push(params[i].nodeId);
            pers.push(params[i].nodeId);
        }
        var oldPer = ${permissions};
        if (newPer.length >= oldPer.length) {
            for (var i = 0; i < oldPer.length; i++) {
                var index = newPer.indexOf(oldPer[i] + "");
                console.log(index);
                newPer.splice(index, 1)
            }
        } else if (newPer.length > oldPer.length) {
            for (var i = 0; i < oldPer.length; i++) {
                var index = oldPer.indexOf(newPer[i] + "");
                console.log(index);
                oldPer.splice(index, 1)
            }
        }
        if (newPer.length === 0 || oldPer.length.length === 0) {
            return 0;
        } else {
            $.ajax({
                url: '/role/update',
                traditional: true,
                data: {"roleId":${roleId}, "pers": pers},
                async: false,   //同步请求
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 200) {
                        parent.layer.msg(res.msg, {icon: 1})
                        return 1;
                    } else {
                        parent.layer.msg(res.msg, {icon: 2})
                        return -1;
                    }
                }
            });
        }
    };
</script>
</html>